<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        .carousel-container {
            position: relative;
            width: 80%;
            height: 60vh;
            margin: 0 auto;
            overflow: hidden;
        }

        .carousel {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            transition: all .3s ease-in-out;
        }

        .carousel-item {
            width: 100%;
            height: 100%;
        }

        .carousel-item:not(.active) {
            opacity: 0;
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div class="carousel-container">
        <div class="carousel">
            <div class="carousel-item active" style="background-color: #ff3b30;"></div>
            <div class="carousel-item" style="background-color: #4cd964;"></div>
            <div class="carousel-item" style="background-color: #007aff;"></div>
            <div class="carousel-item" style="background-color: #ffcc00;"></div>
        </div>
    </div>
</body>
<script>
    // 检测浏览器是否支持Web Speech API
    if ('webkitSpeechRecognition' in window) {
        startRecognition();
    } else {
        console.error('Web Speech API not supported');
    }

    function startRecognition() {
        console.log('Start speech recognition');

        const recognition = new webkitSpeechRecognition();

        recognition.continuous = true;
        recognition.interimResults = false;
        recognition.lang = 'zh-CN';

        recognition.onstart = function () {
            console.log('Speech recognition started');
        };

        recognition.onresult = function (event) {
            const result = event.results[event.results.length - 1][0].transcript;
            // handleSpeechCommand(result);
            console.log('Recognition result: ', result, event);
        };

        recognition.onerror = function (event) {
            console.error('Speech recognition error: ', event.error);
        };

        recognition.onend = function () {
            console.log('Speech recognition ended');
            setTimeout(startRecognition, 1000); // 延迟一秒重新开始识别
        };

        recognition.start();
    }

    function handleSpeechCommand(command) {
        const carousel = document.querySelector('.carousel');
        const activeItem = document.querySelector('.carousel-item.active');
        const items = document.querySelectorAll('.carousel-item');
        const nextItemIndex = (activeItem.dataset.index + 1) % items.length;
        const prevItemIndex = ((activeItem.dataset.index - 1) % items.length + items.length) % items.length;

        if (command.includes('下一个') || command.includes('下一张')) {
            carousel.style.transform = `translateX(-${nextItemIndex * 100}%)`;
            items[activeItem.dataset.index].classList.remove('active');
            items[nextItemIndex].classList.add('active');
            items[nextItemIndex].style.opacity = 1;
            items[nextItemIndex].style.visibility = 'visible';
            activeItem.style.opacity = 0;
            activeItem.style.visibility = 'hidden';
            activeItem.classList.remove('active');
            items[nextItemIndex].dataset.index = nextItemIndex;
        } else if (command.includes('上一个') || command.includes('上一张')) {
            carousel.style.transform = `translateX(-${prevItemIndex * 100}%)`;
            items[activeItem.dataset.index].classList.remove('active');
            items[prevItemIndex].classList.add('active');
            items[prevItemIndex].style.opacity = 1;
            items[prevItemIndex].style.visibility = 'visible';
            activeItem.style.opacity = 0;
            activeItem.style.visibility = 'hidden';
            activeItem.classList.remove('active');
            items[prevItemIndex].dataset.index = prevItemIndex;
        }
    }

    (function () {
        const items = document.querySelectorAll('.carousel-item');
        let index = 0;

        for (let i = 0; i < items.length; i++) {
            items[i].dataset.index = i;
        }

        setInterval(() => {
            items[index].classList.remove('active');
            items[index].style.opacity = 0;
            items[index].style.visibility = 'hidden';
            index = (index + 1) % items.length;
            items[index].classList.add('active');
            items[index].style.opacity = 1;
            items[index].style.visibility = 'visible';
            items[index].dataset.index = index;
        }, 5000);
    })();
</script>

</html>